import React from 'react'
import styles from '@/assets/css/detail.module.css';
import { sleep } from 'antd-mobile/es/utils/sleep'

const HotelRate = () => {
    const [searchParams] = React.Router.useSearchParams()
    const [roomid] = React.useState(searchParams.get('roomid') ? searchParams.get('roomid') : 0)
    const [RoomDetail, SetRoomDetail] = React.useState<any>({flag_text: []})
    const [CommentList, SetCommentList] = React.useState([])
    const [hasMore, SethasMore] = React.useState(false)
    const [page, SetPage] = React.useState(1)

    React.useEffect(() => 
    {
        GetRoomInfoData();
        GetRateListData();
    }, []);

    const GetRoomInfoData = async () => 
    {
        let result = await React.HTTP.post('/room/RoomInfo', {
            roomid: roomid
        })

        if (result && result.code == 1) 
        {
            SetRoomDetail(result.data.info);
        }
    }

    //下拉刷新
    const OnRefresh = async () => 
    {
        SetPage(1)
        SethasMore(true);
        SetCommentList([]);

        await sleep(1000);
        await GetRateListData();
    };

    // 上拉加载
    const LoadMore = async () => 
    {
        await sleep(1000)
        GetRateListData()
    }

    const GetRateListData = async() =>
    {
        let result = await  React.HTTP.post('/room/CommentList', {
            page: page,
            roomid: roomid
        })

        if(result.code == 0)
        {
            SethasMore(false)
            return false
        }else
        {
            SethasMore(true)
            SetPage(page + 1)
            SetCommentList(CommentList.concat(result.data))
        }
    }
    
    return (
        <>
            <React.UI.Image src={RoomDetail.thumb_text} height={213} fit='cover' />

            <div className={styles.detail_top}>
                <div id="intro" className={styles.intro}>
                    <div className={styles.title}>{RoomDetail.name}</div>
                    <div className={styles.betwee}>
                        <div className={styles.left}>
                            {
                                RoomDetail.flag_text.map((item: string, index: number) =>{
                                    return(
                                        <span key={index}>{item}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className={styles.title}>{RoomDetail.content}</div>
                </div>


                {/* 评价 */}
                <div id="comment" className={styles.comment}>
                    <div className={styles.title}>评价</div>
                    <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
                        <React.UI.PullToRefresh onRefresh={OnRefresh}>
                            {CommentList && CommentList.map((item:any) => (
                                <div className={styles.rate_list_item} key={item.id}>
                                    <div className={styles.item_content}>
                                        <div className={styles.content_prefix}>
                                            <div className={styles.ratelist}>
                                                <div className={styles.image}>
                                                    <img src={item.business.avatar_text} alt="" />
                                                </div>
                                                <p className={styles.nickname}>{item.business.nickname}</p>
                                            </div>
                                        </div>
                                        <div className={styles.content_main}>
                                            <div className={styles.rate}>
                                                <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                                            </div>
                                            <div className={styles.item_description}>
                                                <p>{item.content}</p>
                                                <p className={styles.item_time}>{item.createtime_text}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                            <React.UI.InfiniteScroll loadMore={LoadMore} hasMore={hasMore} threshold={0} />
                        </React.UI.PullToRefresh>
                    </React.UI.List>
                </div>
            </div>
        </>
    )
}

export default HotelRate;